import headerImgUploader from "../Components/headerImgUploader";
import validate from '../../libs/validate';

export default {
    components: {
        headerImgUploader
    },
    computed: {
        user() {
            return this.$store.state.user.data
        }
    },
    data() {
        return {
            liveRoomTypeTableColumns: [{
                'title': '序号',
                'align': 'center',
                'type': 'index',
                'width': 70
            },  {
                'title': '名称',
                'align': 'center',
                'key': 'type_name',

            },  {
                'title': '创建时间',
                'align': 'center',
                'key': 'createtime',

            }, {
                'title': '操作',
                'align': 'center',
                'key': 'action',
                'action': true
            }],
            searchKey: '',
            pageCount: 0,
            pageNum: 1,
            pageLoading: false,
            liveRoomTypeList: [],
            selectData: '',
            showModal: false,
            liveRoomTypeForm: {
                type_name: '',
            },
            liveRoomTypeFormRules: {
                type_name: [{
                    required: true,
                    validator: validate.name,
                    trigger: 'blur'
                }],
            },
            uploadImgData:{},
            imgUploadUrl:'',
            modalLoading:true,
        }
    },
    methods: {
        /**
         * @param {Boolean} type
         * 设置确定按钮loading动画，传True或者False
         */
        changeLoadingStatus(type) {
            if (!type) {
                this.modalLoading = false;
            }
            this.$nextTick(() => {
                this.modalLoading = true;
            });
        },
        changePage(num) {
            this.pageNum = num;
            this.getliveRoomTypeList();
            document.querySelector('.single-page-con').scrollTo(0, 0)

        },
        getliveRoomTypeList() {
            if (this.pageLoading) return
            this.pageLoading = true;
            this.http.post(this.postUrl.doGetLiveRoomTypeListUrl, {
                token: this.user.tokenList[0],
                pageNum: this.pageNum,
                pageSize: 20,
                key_word: this.searchKey
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.pageCount = data.data.totalRow;
                    this.liveRoomTypeList = JSON.parse(JSON.stringify(data.data.list));
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            }).then(() => {
                this.pageLoading = false;
            })
        },
        goLiveRoom(){
                this.$router.push({
                    name:'live-ctrl-room'
                })
        },
        clickOK(){
            this.changeLoadingStatus(true)
            this.$refs.liveRoomTypeForm.validate(valid=>{
                if(!valid){
                    this.changeLoadingStatus(false);
                    return
                }
                let postData =JSON.parse(JSON.stringify(this.liveRoomTypeForm));
                postData.token = this.user.tokenList[0];
                if(this.selectData){
                    postData.uuid = this.selectData.uuid;
                }

                this.http.post(this.postUrl.doAddOrEditRoomTypeUrl,postData).then((data)=>{
                    if(data.code > -1){
                        this.$Notice.success({
                            title: this.selectData?'修改成功！':'新增成功！'
                        })
                        this.showModal = false;
                        this.getliveRoomTypeList();
                    }else{
                        this.errorHandle(data.msg)
                    }
                    this.changeLoadingStatus(false)

                },()=>{
                    this.errorHandle()
                    this.changeLoadingStatus(false)

                })
            })
        },
        deleteRoomType(param){
            this.http.post(this.postUrl.deleteRoomTypeUrl,{
                token:this.user.tokenList[0],
                uuid:param.uuid
            }).then((data)=>{
                if(data.code > -1){
                    this.$Notice.success({
                        title: '操作成功！',
                    })
                    this.getliveRoomTypeList()
                }else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            })
        }
    },
    created() {
        this.liveRoomTypeTableColumns.forEach(item => {
            if (item.action) {
                item.render = ((h, param) => {
                    return h('div', [
                        h('Button', {
                            class: 'table-action-box',
                            style: {
                                'margin-right': '10px',
                            },
                            props: {
                                type: "primary",
                                icon: 'edit'

                            },
                            on: {
                                click: () => {
                                    this.selectData = param.row;
                                    this.liveRoomTypeForm =  {
                                        type_name: this.selectData.type_name,
                                    }
                                    this.showModal = true;
                                }
                            }
                        },'编辑'),
                        h(
                            "Poptip", {
                                props: {
                                    confirm: true,
                                    title: "您确定要删除这个类型?",
                                    transfer: true
                                },
                                on: {
                                    "on-ok": () => {
                                        // this.ignoreFeedback(param.row)

                                         this.deleteRoomType(param.row)
                                    }
                                }
                            }, [
                                h('Button', {
                                    class: 'ignore-btn',
                                    style: {
                                    },
                                    props: {
                                        type: "error",
                                        icon: 'trash-b'
                                    },
                                    on: {
                                        click: () => {

                                        }
                                    }
                                },'删除')
                            ]
                        )
                    ])
                })

            }
        })
        if (this.user) {
            this.getliveRoomTypeList()
        }

    },
    watch: {
        user(val, old) {
            if (!old && val) {
                this.getliveRoomTypeList()

            }
        },
        showModal(val){
            if(!val){
                this.selectData = '';
                setTimeout(()=>{
                    this.liveRoomTypeForm =  {
                        type_name: '',
                    }

                })
                this.$refs.liveRoomTypeForm.resetFields()

            }
        }
    }
}
